<!-- 班结记录查看 -->
<template>
  <div class="app-container" id="pdfHtml">
    <div class="shift-head">
      <div></div>
      <div class="shift-div">
        <el-button
          type="primary"
          size="small"
          style="margin: 10px 0px 0px 310px"
          @click="exportPDF"
          >导出</el-button
        >
      </div>
    </div>
    <div class="shift-test">非油班结记录</div>
    <div class="shift-head">
      <div class="shift-div">油站：{{ stationName }}</div>
      <div class="shift-div">班结ID：{{ classNo }}</div>
      <div class="shift-div">收银员：{{ createName }}</div>
      <div class="shift-div">
        时间：{{ classStartTime ? classStartTime : "开始时间" }} -
        {{ classEndTime ? classEndTime : "结束时间" }}
      </div>
    </div>

    <!-- 表格---非油班结记录 -->
    <div class="summary-container">
      <div class="summary-item">
        <div class="summary-div">
          <div class="summary-text">应收合计 (元)</div>
          <div class="summary-index">{{ payableAmount }}</div>
        </div>
        <div class="summary-div">
          <div class="summary-text">优惠合计 (元)</div>
          <div class="summary-index">{{ totalDiscountAmount }}</div>
        </div>
      </div>
      <div class="summary-item">
        <div class="summary-div">
          <div class="summary-text">实收合计 (元)</div>
          <div class="summary-index">{{ actuallyAmount }}</div>
        </div>
        <div class="summary-div">
          <div class="summary-text">退款合计 (元)</div>
          <div class="summary-index">{{ refundAmount }}</div>
        </div>
      </div>
    </div>

    <!-- 表格---商品汇总 -->
    <div style="width: 100%; text-align: center; margin-bottom: 80px">
      <div style="font-size: 20px; margin: 20px 0px 20px 0px">商品汇总</div>
      <el-table border style="width: 100%" :data="commodityClassList">
        <el-table-column
          label="类目"
          prop="categoryName"
          align="left"
        ></el-table-column>

        <el-table-column
          label="数量"
          prop="commodityNum"
          align="left"
        ></el-table-column>
        <el-table-column
          label="总价（元）"
          prop="totalPrice"
          align="left"
        ></el-table-column>
      </el-table>
    </div>

    <!-- 表格---支付汇总 -->
    <div style="width: 100%; text-align: center; margin-bottom: 20px">
      <div style="font-size: 20px; margin: 20px 0px 20px 0px">支付汇总</div>
      <el-table border style="width: 100%" :data="classPayTypeDtoList">
        <el-table-column
          label="支付方式"
          prop="payType"
          align="left"
          :formatter="formatterPayType"
        ></el-table-column>
        <el-table-column
          label="收款合计（元）"
          prop="actuallyAmount"
          align="left"
        ></el-table-column>
        <el-table-column
          label="退款合计（元）"
          prop="refundAmount"
          align="left"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import { getPdf } from "@/api/exportPdf";
import { classSettlementDetails } from "@/api/nonOil/class";
export default {
  data() {
    return {
      stationName: null,
      classNo: null,
      createName: null,
      classStartTime: null,
      classEndTime: null,

      payableAmount: null,
      totalDiscountAmount: null,
      actuallyAmount: null,
      refundAmount: null,

      commodityClassList: [],
      classPayTypeDtoList: [],
    };
  },
  created() {
    if (this.$route.query.classNo) {
      this.settlementDetails();
    } else {
      this.$message.error("系统异常，请联系管理员");
    }
  },

  methods: {
    exportPDF() {
      getPdf("班结记录查看", "pdfHtml");
    },
    settlementDetails() {
      classSettlementDetails({ classNo: this.$route.query.classNo }).then(
        (res) => {
          if (res && res.code === 200) {
            let payTypeList;
            this.stationName = res.data.stationName;
            this.classNo = res.data.classNo;
            this.createName = res.data.createName;
            this.classStartTime = res.data.classStartTime;
            this.classEndTime = res.data.classEndTime;
            this.payableAmount = res.data.payableAmount;
            this.totalDiscountAmount = res.data.totalDiscountAmount;
            this.actuallyAmount = res.data.actuallyAmount;
            this.refundAmount = res.data.refundAmount;
            this.commodityClassList = res.data.commodityClassList;
            this.classPayTypeDtoList = res.data.classPayTypeDtoList;

            const payType = ["xj", "spj", "合计"];
            payTypeList = cloneDeep(this.classPayTypeDtoList).map((item) => {
              return item.payType;
            });
            payType.forEach((item) => {
              if (!payTypeList.includes(item)) {
                this.classPayTypeDtoList.unshift({
                  actuallyAmount: 0,
                  payType: item,
                  refundAmount: 0,
                });
              }
            });
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
    // 格式化支付类型
    formatterPayType(row, column) {
      const types = {
        xj: "现金支付",
        spj: "双屏机",
      };
      return row.payType !== "合计" ? types[row.payType] ?? "" : "合计";
    },
  },
};
</script>
<style scoped lang="scss">
.summary-container {
  width: 100%;
  height: 100px;
  border: 1px solid #ebebeb;
  display: flex;
  margin-bottom: 80px;
  .summary-item {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 50%;
    .summary-div {
      width: 100%;
      display: flex;
      .summary-text {
        width: 30%;
        line-height: 50px;
        text-align: center;
        border-right: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;
      }
      .summary-index {
        width: 70%;
        line-height: 50px;
        text-align: center;
        border-right: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;
      }
    }
  }
}
.shift-head {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
}
.shift-test {
  width: 100%;
  text-align: center;
  font-size: 20px;
  margin-bottom: 50px;
}
</style>
